
<script lang="ts" setup>
import { ref } from "vue";
import { useRouter } from "vue-router";

//引入axios
import Axios from "axios";
//接收axios值
const axios = Axios;

const router = useRouter();
let uname = ref("");
let upwd = ref("");

function LoginMgs() {
    alert(uname.value);
    alert(upwd.value);
    if (uname.value == "" || uname.value == null) {
        alert('用户名密码不能为空');
        return;
    }
    if (upwd.value == "" || upwd.value == null) {
        alert('密码不能为空');
        return;
    }
    //axios提交到后台

    axios({
        method: 'post',
        url: 'https://localhost:44395/api/user/GetUserLogin?uname=' + uname.value + '&upwd=' + upwd.value + '',
    })
        .then(function (response) {
            alert('方法请求成功');
            console.log(response);
            //登录成功
            if (response.data != "") {
                router.push("/messages");
            }
            //登录失败
            else {
                alert("用户名密码错误");
            }
        })
        .catch(function (error) {
            console.log(error);
        });
}
</script>

<template>
    <div>
        <!-- BEGIN LOGO -->
        <div class="pure-g">
            <div class="pure-u-1 logo"><img src="../assets/vue.svg" alt="" /></div>
        </div>
        <!-- END LOGO -->
        <!-- BEGIN LOGIN -->
        <div class="pure-g content">
            <form class="pure-form pure-u-1">
                <h4>请登录您的账号</h4>
                <fieldset class="pure-group">
                    <input type="text" class="pure-input-1" placeholder="用户名" required autofocus v-model="uname">
                    <input type="password" class="pure-input-1" placeholder="密　码" required v-model="upwd">
                </fieldset>
                <label for="remeberMe" class="pure-checkbox">
                    <input id="remeberMe" name="remeberMe" type="checkbox" value="1"> 30天内免登陆
                </label>
                <button class="pure-button pure-u-1 pure-button-primary" type="submit" @click="LoginMgs()">登　录</button>
            </form>
        </div>
        <!-- END LOGIN -->
        <!--BEGIN FOOT-->
        <div class="pure-g copyright">
            <div class="pure-u-1"> 2110 </div>
        </div>
        <!--END FOOT-->
    </div>
</template>

<style src="../assets/DomCss/css/pure-nr-min.css"></style>
<style src="../assets/DomCss/css/main.css"></style>
<style src="../assets/DomCss/css/login.css"></style>
<style src="../assets/DomCss/js/icheck/skins/minimal/blue.css"></style>